import { CloseOutlined } from '@ant-design/icons'

import './foodTag.scss'

export default function foodTag({ props }) {

    const { title, id, data, dispatch } = props

    const handleDel = (id) => {
        data.splice(data.findIndex(item => item.id === id), 1)
        dispatch({ type: 'set', value: [...data] })
    }

    return (
        <div className='turn_food_tag' id={id}>
            {title}&nbsp;
            <CloseOutlined onClick={() => handleDel(id)} />
        </div>
    )
}
